<template>
  <Container class="role-edit">
    <Tabs value="tab1">
      <TabPane label="经营品牌" name="tab1">
        <Table
            :height="options.tableHeight"
            stripe
            :columns="list.columns"
            :data="list.data"
            no-data-text="亲，没有找到相关记录哦！~"></Table>
          <div class="pager">
            <Page
              :total="list.totalItem"
              :current="list.currentPage"
              :page-size="list.pageSize"
              @on-change="onPageChange"
              @on-page-size-change="onPageSizeChange"
              show-sizer
              placement="top"
            ></Page>
          </div>
          <Loader :status="list.status" @refresh="getData"></Loader>
      </TabPane>
    </Tabs>
    <brandItemModal   :imgUrl='imgUrl' ref='code'></brandItemModal>
  </Container>
</template>

<script>
import { renderButton } from "@/util";
import { Switch } from "view-design";
import { clearEmpty } from '@/util';
import brandItemModal from './BrandItemModal'
import table from '@/table'
export default {
  components: {
    Switch,
    brandItemModal
  },
  data() {
    return {
      tab: "tab1",
      imgUrl:'',
      options: {
        tableHeight: 550
      },
      title: "经营品牌",
      isMain: null,
      list: {
        columns: [{
            title: "品牌",
            key: "brandName",
            align: "left",
            minWidth: 200
          }, {
            title: "主品牌",
            key: "isMain",
            align: "left",
            minWidth: 200,
            render: (h, params) => {
              return (
                "div",
                [
                  h("i-switch", {
                      props:{
                          value:params.row.isMain
                      },
                    on: {
                      'on-change': (val) => {
                        this.changeStar(val,params.row.id,params.row.isMain);
                      }
                    }
                  })
                ]
              )
            }
          },
          {
            title:'品牌二维码',
            key:'code',
            align:'right',
            minWidth: 200,
            render: (h, params) => {
              return (
                "div",
                [
                   h('Button', {
                  props:{
                      size:'small',
                      type: 'primary'
                  },
                  on: {
                      click: () => {
                        this.see(params)
                      }
                  }
              },'查看')
                ]
              )
            }
          }
        ],
        data: [],
        status: "pass",
        currentPage: 1,
        pageSize: 10
      }
    };
  },
  mounted() {
    this.initTable()
    this.getData()
  },
  methods: {
    ...table,
    getData(){
      this.list.status= 'loading'
      let params ={
        current:this.list.currentPage,
        size: this.list.pageSize
      }
      this.$jsonPost('/product/supplier_brand_pool/page', params).then(data => {
          this.list.data= []
          this.list.totalItem = Number(data.total)
          this.list.data= (data.records||[]).map(item => {
            return {
              id:item.id,
              brandName:item.brandName,
              brandId:item.brandId,
              isMain:item.isMain,
              supplierId:item.supplierId
            }
          })
          this.list.status= 'pass'
      })
    },
    jumpPrevPage() {
      this.$router.back()
    },
    see(x) {
      this.list.loading='loading'
      let param = {
        brandId: x.row.brandId,
      }
      this.$ajaxGet('/product/supplier_brand_pool/qrcode',param).then(data => {
        this.$refs.code.open()
        return this.imgUrl = data
      })
      this.list.loading = 'pass'
    },
    changeStar(val, id, isMain) {
      let  url;
      val ? url =`/product/supplier_brand_pool/setBrandIsMain/${id}`: url = `/product/supplier_brand_pool/cancelBrandIsMain/${id}`
      this.$ajax(url).then( res=>{
        return  res
      })
    },
     onPageChange(number) {
      this.list.currentPage = number;
      this.$router.push({
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      });
      this.getData();
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1;
      this.list.pageSize = pageSize;
      this.$router.push({
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      });
      this.getData();
    }
  }
};
</script>
